<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<style>
body,html {
	font-family: "微软雅黑";
	color: gray;
}

.top-title {
	height: 50px;
	background: #33CCCC;
	line-height: 50px;
	text-align: center;
	color: white;
	border-bottom: 1px solid #F2F2F2;
	font-weight: bold;
}

.form-control {
	width: 95%;
	margin: 0 auto;
}

input[type=button] {
	background: #33CCCC;
	color: white;
	border: 0px;
}

.reg-info {
	 color: red;
	 margin: 0 auto; width：100%;
	 text-align: center;
 }

</style>
</head>
<body>
	<div class="top-title">新用户注册</div>
	<br>
	<form>
	<div class="input-group username">
		<span class="input-group-addon ">
			<span class="glyphicon glyphicon-user"></span></span>
			<input type="text" name="name" class="form-control" id="username" placeholder="输入用户名  6-20字符"
			maxlength="20">
	</div>
	<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-lock"></span></span><input type="password"
			class="form-control" id="password" name="password" placeholder="输入密码">
	</div>
	<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-ok"></span></span><input type="password"
			class="form-control" id="password2" placeholder="确认密码">
	</div>
	<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-ok-sign"></span></span><input type="text"
			class="form-control" id="realName" name="realName" placeholder="真实姓名" maxlength="14">
	</div>
	<!--<br><div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-ok-sign"></span></span><input type="text"
			class="form-control" id="sex"  placeholder="性别" maxlength="4">
	</div>-->
	<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-phone"></span></span><input type="text"
			class="form-control" id="tell" name="phone" placeholder="输入手机号">
	</div>
	<!--<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-envelope"></span></span><input type="text"
			class="form-control" id="email" placeholder="邮箱" maxlength="16">
	</div>-->
	<!--<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-home"></span></span><input type="text"
			class="form-control" id="school" placeholder="学校" maxlength="14">
	</div>-->
	<br>
	<div class="input-group password">
		<span class="input-group-addon "><span
			class="glyphicon glyphicon-map-marker"></span></span><input type="text"
			class="form-control" id="address" name="address" placeholder="地址" maxlength="14">
	</div>
	<br>
	 <input type="button" class="btn btn-primary btn-sm btn-block" id="btn" onclick="register()" value="立即注册">
	<br>
	<div class="reg-info" id="warning">&nbsp;</div>
	<div class="noreg">
		已有账号？立即<a href="login.html">登录</a>
	</div>
	</form>
<script>
	/*$(function () {
		$("#username").blur(function () {
			if ($("#username").html() == " ") {
				$("#warning").html("用户名不能为空");
			}else {
				$("#warning").html("");
			}
	})*/

	function register() {
		var name=$("#name").val();
		var password=$("#password").val();
		var ok_password=$("#password2").val();
		var realName=$("#realName").val();
		var phone=$("#phone").val();
		var address=$("#address").val();
		if(name==""||password==""||ok_password==""||phone==""||password!=ok_password||realName==""){
			$("#warning").html("两次密码不一致或者用户信息不完整");
			return false;
		}
		else if($("#password").val().length<6){
			$("#warning").html("密码长度必须在六位以上");
			return false;
		}else {
			$("#warning").html("注册成功");
		}
		var data = $("form").serialize();
		$.ajax({
			url:"http://localhost:8080/register",
			data:data,
			success:function (data) {
				alert(data);
			}
		})
	}
</script>
</body>
</html>